<!-- 完整可运行 HTML 代码 -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>车间生产数据汇总</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
    <style>
        :root {
            --primary-color: #2c3e50;
            --secondary-color: #3498db;
            --success-color: #27ae60;
            --warning-color: #f39c12;
            --danger-color: #e74c3c;
            --light-bg: #f5f7fa;
            --card-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Helvetica Neue', Arial, sans-serif;
        }
        
        body {
            background-color: var(--light-bg);
            color: #333;
            padding: 20px;
            max-width: 100%;
            overflow-x: hidden;
        }
        
        .header {
            margin-bottom: 20px;
            text-align: center;
        }
        
        .header h1 {
            color: var(--primary-color);
            font-size: 24px;
            font-weight: 600;
            margin-bottom: 10px;
        }
        
        .header .date {
            color: #7f8c8d;
            font-size: 14px;
        }
        
        .dashboard {
            display: grid;
            grid-template-columns: 1fr;
            gap: 15px;
            margin-bottom: 20px;
        }
        
        .card {
            background: white;
            border-radius: 10px;
            padding: 15px;
            box-shadow: var(--card-shadow);
            transition: transform 0.3s ease;
        }
        
        .card:hover {
            transform: translateY(-5px);
        }
        
        .card-title {
            font-size: 16px;
            color: var(--primary-color);
            margin-bottom: 10px;
            font-weight: 500;
            display: flex;
            align-items: center;
        }
        
        .card-title i {
            margin-right: 8px;
            color: var(--secondary-color);
        }
        
        .card-value {
            font-size: 24px;
            font-weight: 600;
            margin-bottom: 5px;
        }
        
        .card-extra {
            font-size: 14px;
            color: #7f8c8d;
        }
        
        .success-text {
            color: var(--success-color);
        }
        
        .warning-text {
            color: var(--warning-color);
        }
        
        .danger-text {
            color: var(--danger-color);
        }
        
        .chart-container {
            background: white;
            border-radius: 10px;
            padding: 15px;
            box-shadow: var(--card-shadow);
            margin-bottom: 20px;
            height: 300px;
        }
        
        .chart-title {
            font-size: 16px;
            color: var(--primary-color);
            margin-bottom: 15px;
            font-weight: 500;
        }
        
        .refresh-btn {
            background-color: var(--secondary-color);
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 5px;
            font-size: 14px;
            cursor: pointer;
            display: block;
            margin: 0 auto;
            margin-top: 20px;
            box-shadow: 0 2px 8px rgba(52, 152, 219, 0.3);
            transition: all 0.3s ease;
        }
        
        .refresh-btn:hover {
            background-color: #2980b9;
            transform: translateY(-2px);
        }
        
        .grid-2 {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px;
        }
        
        .progress-bar {
            height: 6px;
            background-color: #ecf0f1;
            border-radius: 3px;
            margin-top: 8px;
            overflow: hidden;
        }
        
        .progress {
            height: 100%;
            border-radius: 3px;
        }
        
        @media (max-width: 600px) {
            .grid-2 {
                grid-template-columns: 1fr;
            }
            
            .card-value {
                font-size: 20px;
            }
        }
    </style>
</head>
<body>
    <div class="header">
        <h1>车间生产数据汇总</h1>
        <div class="date" id="current-date"></div>
    </div>
    
    <div class="dashboard grid-2">
        <div class="card">
            <div class="card-title"><i>📊</i> 总产量</div>
            <div class="card-value" id="total-output">12,856</div>
            <div class="card-extra">较昨日 <span class="success-text">↑5.2%</span></div>
        </div>
        
        <div class="card">
            <div class="card-title"><i>✅</i> 正常产出</div>
            <div class="card-value" id="normal-output">10,289</div>
            <div class="card-extra">占比 <span id="normal-rate">80.0%</span></div>
            <div class="progress-bar">
                <div class="progress" style="width: 80%; background-color: var(--success-color);"></div>
            </div>
        </div>
        
        <div class="card">
            <div class="card-title"><i>🔀</i> 合并档产出</div>
            <div class="card-value" id="merge-output">1,028</div>
            <div class="card-extra">占比 <span id="merge-rate">8.0%</span></div>
            <div class="progress-bar">
                <div class="progress" style="width: 8%; background-color: var(--warning-color);"></div>
            </div>
        </div>
        
        <div class="card">
            <div class="card-title"><i>⚠️</i> 漏电产出</div>
            <div class="card-value" id="leak-output">771</div>
            <div class="card-extra">占比 <span id="leak-rate">6.0%</span></div>
            <div class="progress-bar">
                <div class="progress" style="width: 6%; background-color: var(--danger-color);"></div>
            </div>
        </div>
        
        <div class="card">
            <div class="card-title"><i>🔋</i> DLCC产出</div>
            <div class="card-value" id="dlcc-output">514</div>
            <div class="card-extra">占比 <span id="dlcc-rate">4.0%</span></div>
            <div class="progress-bar">
                <div class="progress" style="width: 4%; background-color: #9b59b6;"></div>
            </div>
        </div>
        
        <div class="card">
            <div class="card-title"><i>⏱️</i> 平均效率</div>
            <div class="card-value" id="avg-efficiency">92.5%</div>
            <div class="card-extra">较昨日 <span class="success-text">↑1.8%</span></div>
        </div>
        
        <div class="card">
            <div class="card-title"><i>📦</i> 入库效率</div>
            <div class="card-value" id="storage-efficiency">88.3%</div>
            <div class="card-extra">较昨日 <span class="warning-text">↓0.5%</span></div>
        </div>
    </div>
    
    <div class="chart-container">
        <div class="chart-title">合并档与漏电趋势 (近7天)</div>
        <div id="defect-chart" style="width: 100%; height: 250px;"></div>
    </div>
    
    <div class="chart-container">
        <div class="chart-title">效率趋势 (近7天)</div>
        <div id="efficiency-chart" style="width: 100%; height: 250px;"></div>
    </div>
    
    <button class="refresh-btn" id="refresh-btn">刷新数据</button>
    
    <script>
        // 设置当前日期
        document.getElementById('current-date').textContent = new Date().toLocaleDateString('zh-CN', { 
            year: 'numeric', 
            month: 'long', 
            day: 'numeric',
            weekday: 'long'
        });
        
        // 生成模拟数据
        function generateMockData() {
            const dates = [];
            const today = new Date();
            
            for (let i = 6; i >= 0; i--) {
                const date = new Date(today);
                date.setDate(date.getDate() - i);
                dates.push(date.toLocaleDateString('zh-CN', { month: 'short', day: 'numeric' }));
            }
            
            // 生成随机趋势数据
            function generateTrend(base, variation) {
                return dates.map((_, i) => {
                    const rand = Math.random() * variation * 2 - variation;
                    return Math.round(base + rand + i * (Math.random() > 0.5 ? 1 : -1));
                });
            }
            
            return {
                dates,
                totalOutput: generateTrend(12000, 1000),
                normalOutput: generateTrend(10000, 800),
                mergeOutput: generateTrend(800, 100),
                leakOutput: generateTrend(700, 80),
                dlccOutput: generateTrend(500, 50),
                avgEfficiency: generateTrend(90, 3).map(v => v / 100),
                storageEfficiency: generateTrend(88, 2).map(v => v / 100)
            };
        }
        
        // 初始化图表
        function initCharts() {
            const data = generateMockData();
            
            // 更新卡片数据
            document.getElementById('total-output').textContent = data.totalOutput[6].toLocaleString();
            document.getElementById('normal-output').textContent = data.normalOutput[6].toLocaleString();
            document.getElementById('merge-output').textContent = data.mergeOutput[6].toLocaleString();
            document.getElementById('leak-output').textContent = data.leakOutput[6].toLocaleString();
            document.getElementById('dlcc-output').textContent = data.dlccOutput[6].toLocaleString();
            
            const normalRate = (data.normalOutput[6] / data.totalOutput[6] * 100).toFixed(1);
            const mergeRate = (data.mergeOutput[6] / data.totalOutput[6] * 100).toFixed(1);
            const leakRate = (data.leakOutput[6] / data.totalOutput[6] * 100).toFixed(1);
            const dlccRate = (data.dlccOutput[6] / data.totalOutput[6] * 100).toFixed(1);
            
            document.getElementById('normal-rate').textContent = `${normalRate}%`;
            document.getElementById('merge-rate').textContent = `${mergeRate}%`;
            document.getElementById('leak-rate').textContent = `${leakRate}%`;
            document.getElementById('dlcc-rate').textContent = `${dlccRate}%`;
            
            
            
            document.getElementById('avg-efficiency').textContent = `${(data.avgEfficiency[6] * 100).toFixed(1)}%`;
            document.getElementById('storage-efficiency').textContent = `${(data.storageEfficiency[6] * 100).toFixed(1)}%`;
            
            // 缺陷趋势图
            const defectChart = echarts.init(document.getElementById('defect-chart'));
            defectChart.setOption({
                tooltip: {
                    trigger: 'axis',
                    formatter: '{b}<br/>{a0}: {c0}<br/>{a1}: {c1}'
                },
                legend: {
                    data: ['合并档产出', '漏电产出'],
                    bottom: 0
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '15%',
                    top: '10%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: data.dates
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        name: '合并档产出',
                        type: 'line',
                        smooth: true,
                        data: data.mergeOutput,
                        itemStyle: {
                            color: '#f39c12'
                        },
                        lineStyle: {
                            width: 3
                        },
                        symbolSize: 8
                    },
                    {
                        name: '漏电产出',
                        type: 'line',
                        smooth: true,
                        data: data.leakOutput,
                        itemStyle: {
                            color: '#e74c3c'
                        },
                        lineStyle: {
                            width: 3
                        },
                        symbolSize: 8
                    }
                ]
            });
            
            // 效率趋势图
            const efficiencyChart = echarts.init(document.getElementById('efficiency-chart'));
            efficiencyChart.setOption({
                tooltip: {
                    trigger: 'axis',
                    formatter: function(params) {
                        return `${params[0].axisValue}<br/>
                                ${params[0].seriesName}: ${(params[0].value * 100).toFixed(1)}%<br/>
                                ${params[1].seriesName}: ${(params[1].value * 100).toFixed(1)}%`;
                    }
                },
                legend: {
                    data: ['平均效率', '入库效率'],
                    bottom: 0
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '15%',
                    top: '10%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: data.dates
                },
                yAxis: {
                    type: 'value',
                    axisLabel: {
                        formatter: '{value}%'
                    },
                    min: function(value) {
                        return (value.min * 100 - 5) / 100;
                    },
                    max: 1
                },
                series: [
                    {
                        name: '平均效率',
                        type: 'line',
                        smooth: true,
                        data: data.avgEfficiency,
                        itemStyle: {
                            color: '#27ae60'
                        },
                        lineStyle: {
                            width: 3
                        },
                        symbolSize: 8
                    },
                    {
                        name: '入库效率',
                        type: 'line',
                        smooth: true,
                        data: data.storageEfficiency,
                        itemStyle: {
                            color: '#3498db'
                        },
                        lineStyle: {
                            width: 3
                        },
                        symbolSize: 8
                    }
                ]
            });
            
            // 窗口大小变化时重新调整图表大小
            window.addEventListener('resize', function() {
                defectChart.resize();
                efficiencyChart.resize();
            });
            
            return data;
        }
        
        // 初始化
        let currentData = initCharts();
        
        // 刷新按钮事件
        document.getElementById('refresh-btn').addEventListener('click', function() {
            this.textContent = '数据刷新中...';
            this.disabled = true;
            
            // 模拟网络请求延迟
            setTimeout(() => {
                currentData = initCharts();
                this.textContent = '刷新数据';
                this.disabled = false;
                
                // 显示刷新成功提示
                const toast = document.createElement('div');
                toast.textContent = '数据已刷新';
                toast.style.position = 'fixed';
                toast.style.bottom = '20px';
                toast.style.left = '50%';
                toast.style.transform = 'translateX(-50%)';
                toast.style.backgroundColor = 'rgba(0,0,0,0.7)';
                toast.style.color = 'white';
                toast.style.padding = '10px 20px';
                toast.style.borderRadius = '5px';
                toast.style.zIndex = '1000';
                document.body.appendChild(toast);
                
                setTimeout(() => {
                    toast.style.opacity = '0';
                    toast.style.transition = 'opacity 0.5s';
                    setTimeout(() => {
                        document.body.removeChild(toast);
                    }, 500);
                }, 2000);
            }, 800);
        });
    </script>
</body>
</html>
